<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				margin-top:10px ;
			}
			.bgc{
				background-color: green;
			}
			.fontSize30{
				font-size: 30px;
			}
			.width200{
				width: 200px;
			}
			
		</style>
	</head>
	<body>
		<input type="button" value="添加类" id="addClass" />
		<input type="button" value="移除类" id="removeClass" />
		<input type="button" value="判断类" id="hasClass" />
		<input type="button" value="切换类" id="toggleClass" />
		<div id="div1" class="bgc">
			div1
		</div>
		<script>
			$(function(){
				//1.添加类addClass()
				$("#addClass").click(function(){
					//1.1给id为div的元素添加类
//					$("#div1").addClass("fontSize30");//添加单个类
					$("#div1").addClass("fontSize30 width200");//添加多个类
					
				})
				
				//2.移除类
				$("#removeClass").click(function(){
					//2.1给id为div1的元素移除类
//					$("#div1").removeClass("fontSize30");//移除单个类
//					$("#div1").removeClass("fontSize30 width200");//移除单多类
					$("#div1").removeClass();//移除所有类
				})
				
				//3.判断类
				$("#hasClass").click(function(){
					//判断一个元素是否有类，如果没有返回false,否则返回true
					console.log($("#div1").hasClass("fontSize30"));
				})
				
				//4.切换类
				$("#toggleClass").click(function(){
					$("#div1").toggleClass("fontSize30");
				})
			})
		</script>
	</body>
</html>
